<script setup lang="ts">
import { RouterView } from "vue-router";
import { NConfigProvider } from "naive-ui";
import { toRefs, computed } from "vue";
import { useDesignStore } from "@/stores/module/design";
import GlobalProvider from "./components/globalProvider/GlobalProvider.vue";
import { langMessages, dateMessages } from "@/locales/index";

const { theme, isGreyMode, langMode } = toRefs(useDesignStore());

const showLang = computed(() => langMessages[langMode.value]);
const showDate = computed(() => dateMessages[langMode.value]);
</script>

<template>
  <NConfigProvider
    :theme="theme"
    :locale="showLang"
    :date-locale="showDate"
    :class="{ 'filter-grayscale-100': isGreyMode }"
    class="h-full"
  >
    <GlobalProvider>
      <RouterView />
    </GlobalProvider>
  </NConfigProvider>
</template>

<style lang="less"></style>
